<template>
  <el-form :inline="true" :model="queryParams" class="filter-form-inline" label-position="right" size="small">
    <el-row :gutter="40">
      <el-col :lg="6" :xs="8">
        <el-form-item label="商销客户名称" style="width: 100%">
          <el-input v-model="queryParams.keyWord" @change="handleChange" clearable placeholder="商销客户名称" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <table-view :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header" size="medium"
    @sort-change="handlSort" @row-click="aloneClick">
    <el-table-column :show-overflow-tooltip="true" header-align="center" label="商销客户编号" prop="sellerNumber" />

    <el-table-column :show-overflow-tooltip="true" header-align="center" label="商销客户名称" prop="sellerName" />

    <el-table-column :show-overflow-tooltip="true" header-align="center" label="企业所在地区" prop="region">
      <template #default="{row}">
        <span v-if=" row.provinceName">{{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}</span>
      </template>
    </el-table-column>

    <el-table-column :show-overflow-tooltip="true" align="center" label="创建人" prop="creatorName" />

    <el-table-column :show-overflow-tooltip="true" align="center" label="创建时间" prop="createdAt">
      <template #default="{row}">
        {{ dateFormat("yyyy-mm-dd HH:MM:SS", row.createdAt) }}
      </template>
    </el-table-column>

    <el-table-column :show-overflow-tooltip="true" align="center" label="状态" prop="terminalStatus">
      <template #default="{row}">

        <div style="line-height: 20px">
          <span v-if="row.buyStatus ==='1' ">未进货</span>
          <span v-if="row.buyStatus ==='2' ">正式交易</span>
        </div>

        <div style="line-height: 20px" class="flow-status-color"
          v-if="row.qualificationStatus === '-1' || row.qualificationStatus === '0' || row.qualificationStatus === ''">
          待完善资质
        </div>

      </template>
    </el-table-column>

    <el-table-column align="center" label="操作">
      <template #default="{row}">

        <el-button v-auth="{v: ['crm:marketing:cooperationInformation:shangPin:qualification'],
        bool:row.qualificationStatus === '-1' || row.qualificationStatus === '0' || row.qualificationStatus === ''}"
          type="text" @click="handleQualification(row)">
          完善资质
        </el-button>

        <el-button v-auth="{v: ['crm:marketing:cooperationInformation:shangPin:qualification'],
        bool:row.qualificationStatus === '2'}" type="text" @click="handleQualification(row)">
          变更资质
        </el-button>

        <el-button v-auth="{v: ['crm:marketing:cooperationInformation:shangPin:qualification'],
        bool:row.qualificationStatus === '1' &&(row.flowStatus === 'REPEAL' ||row.flowStatus === 'REJECT_INITIATOR' )}"
          type="text" @click="handleQualification(row)">
          完善资质
        </el-button>

      </template>
    </el-table-column>
  </table-view>
  <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.page" :total="total"
    style="display: flex; justify-content: flex-end" @pagination="handlList" />

  <qualification ref="qualificationRef" @qualificationsSuccsess="qualificationsSuccsess" />
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRouter } from "vue-router";

export default {
  components: {
    qualification: defineAsyncComponent(() =>
      import("../modules/qualification.vue")
    ),
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      queryParams: {
        keyWord: "",
        tabType: "2",
        pageSize: 20,
        page: 1,
      },
      total: 0,
      tableData: [{ id: 0 }],
      qualificationRef: null,
    });

    const handleChange = (val) => {
      if (val) {
        data.queryParams.keyWord = val;
      } else {
        data.queryParams = {
          keyWord: "",
          tabType: "2",
          pageSize: 20,
          page: 1,
        };
      }
      handlList();
    };

    // 获取列表
    const handlList = () => {
      api.shangPin.SHANGPIN_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
        }
      });
    };

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === "操作" || column.label === "查看文件") return;
      router.push({
        name: "shangPinSigningDetails",
        query: { id: row.id },
      });
    };

    // 鼠标样式
    const cellStyle = () => {
      return "cursor:pointer;";
    };

    const handleQualification = (row) => {
      data.qualificationRef.open(row);
    };

    const qualificationsSuccsess = () => {
      handlList();
    };

    onMounted(() => {
      handlList();
    });

    return {
      ...toRefs(data),
      handleChange,
      handlList,
      aloneClick,
      cellStyle,
      handleQualification,
      qualificationsSuccsess,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>


